<template>
  <el-dialog
      title="商品信息查看"
      v-model="dialogVisible"
      width="800"
      :before-close="handleClose"
  >
    <!-- 网格容器：实现单元格分隔 -->
    <div class="grid-container">
      <!-- 每行左侧为标签，右侧为值 -->
      <div class="grid-item">商品ID：</div>
      <div class="grid-item">{{ formData.goodsId }}</div>

      <div class="grid-item">商品名称：</div>
      <div class="grid-item">{{ formData.goodsName }}</div>

      <div class="grid-item">商品库存：</div>
      <div class="grid-item">{{ formData.goodsStock }}</div>

      <div class="grid-item">原始价格：</div>
      <div class="grid-item">
        市场价: {{ formData.originalMarketPrice }}<br />
        商城价: {{ formData.originalMallPrice }}
      </div>

      <div class="grid-item">调价幅度：</div>
      <div class="grid-item">
        市场价: {{ formData.adjustMarketPrice }}<br />
        商城价: {{ formData.adjustShoppingPrice }}
      </div>

      <div class="grid-item">希望生效时间：</div>
      <div class="grid-item">{{ formData.beginTime }}</div>

      <div class="grid-item">希望失效时间：</div>
      <div class="grid-item">{{ formData.endTime }}</div>

      <div class="grid-item">调整原因：</div>
      <div class="grid-item">{{ formData.reason }}</div>

      <div class="grid-item">备注：</div>
      <div class="grid-item">{{ formData.remark }}</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">返回</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';

const dialogVisible = ref(false);
const formData = ref({
  goodsId: '',
  goodsName: '',
  goodsStock: '',
  originalMarketPrice: '',
  originalMallPrice: '',
  adjustMarketPrice: '',
  adjustShoppingPrice: '',
  beginTime: '',
  endTime: '',
  reason: '',
  remark: ''
});

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
};

// 暴露方法给父组件：打开对话框并回显数据
const openViewDialog = (rowData) => {
  // 映射行数据到表单展示数据
  formData.value = {
    goodsId: rowData.goodsId || '',
    goodsName: rowData.gname || '',
    goodsStock: rowData.stock || '',
    originalMarketPrice: rowData.oldMarketPrice || '',
    originalMallPrice: rowData.oldShopPrice || '',
    adjustMarketPrice: rowData.adjustMarketPrice || '',
    adjustShoppingPrice: rowData.adjustShoppingPrice || '',
    beginTime: rowData.beginTime ? formatRowDate(rowData.beginTime) : '',
    endTime: rowData.endTime ? formatRowDate(rowData.endTime) : '',
    reason: rowData.reason || '',
    remark: rowData.remark || ''
  };
  dialogVisible.value = true;
};

// 时间格式化工具方法
const formatRowDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}年${month}月${day}日`;
};

// 暴露组件方法
defineExpose({
  openViewDialog
});
</script>

<style scoped>
/* 可根据需要添加样式 */
/* 网格容器：2列布局，自动换行 */
.grid-container {
  display: grid;
  grid-template-columns: 120px 1fr; /* 左列固定宽度，右列自适应 */
  grid-auto-rows: auto; /* 行高自动适应内容 */
  gap: 1px; /* 单元格之间的间隙（实现边框分隔） */
  background-color: #dcdcdc; /* 间隙的背景色（模拟边框） */
  padding: 1px; /* 容器内边距，让间隙背景色显示 */
}

/* 网格项：每个单元格的样式 */
.grid-item {
  background-color: #fff; /* 单元格背景色 */
  padding: 8px; /* 单元格内边距 */
  word-break: break-all; /* 长文本自动换行 */
}

</style>